<template>
	<view>
		<nav-bar :title="$t('流轉')" leftIcon="left"></nav-bar> <!--  :rightText="$t('流轉記錄')" -->
		<view class="contentMain">
			<!-- <image src="../../assets/myCirculation/bjImg.png" class="img"></image> -->
			<view class="imgText">
				<view class="iconText">
					<image src="../../assets/orderDetail/cfp.png" class="icon"></image>
					<view class="moneyName">
						CFP
					</view>
				</view>
				<view class="moneyTypeName">
					{{ $t('鏈類型') }}
				</view>
				<view class="moneyNameKk">
					CFP20
				</view>
			</view>

			<view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						CFP{{ $t('地址') }}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.urlCFP" :placeholder="$t('請你掃碼抑或輸入CFP地址')">
						<!-- #ifdef APP-PLUS -->
						<image @click="scan" src="../../assets/myCirculation/sm.png" class="inpIcon" id="reader">
						</image>
						<!-- #endif -->
					</view>
				</view>
			</view>
			<view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						{{ $t('數量') }}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.amountFlow" :placeholder="$t('請您輸入CFP數量')" type="digit"
							@blur="cli">
						<view class="num" @click="all">
							{{ $t('全部') }}
						</view>
					</view>
				</view>
			</view>
			<view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						{{ $t('備注') }}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.note" :placeholder="$t('請您輸入備注')">
					</view>
				</view>
			</view>
			<!-- <view class="contentList">
				<view class="inputMain">
					<view class="inputName">
						{{$t('手續費')}}
					</view>
					<view class="inpIconFlex">
						<input class="inp" v-model="formData.flowRate" :placeholder="$t('請你輸入CFP數量')">
						<view style="color: #FFFFFF;" class="num">
							CFP
						</view>
					</view>
				</view>
			</view> -->
			<view class="sText">{{ $t('僅支持本平台對CFP地址轉賬，請仔細辨別本次轉賬是否安全') }}</view>
			<view class="btn" @click="notarize">
				{{ $t('確認') }}
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog" v-if="!typePass">
			<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的交易密碼')" :placeholder="$t('請輸入')"
			  @confirm="dialogInputConfirm" :value="formData.payPassword" :cancelText="$t('取消')"
			  :confirmText="$t('確認')"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog" v-if="typePass"> 
			<uni-popup-dialog ref="inputClose" mode="input" :title="$t('輸入您的谷歌密鑰')" :placeholder="$t('請輸入')"
			  @confirm="dialogInputConfirm" :value="formData.payPassword" :cancelText="$t('取消')"
			  :confirmText="$t('確認')"></uni-popup-dialog>
		  </uni-popup>		
	</view>
</template>

<script setup>
// import qrcode from "@/utils/reqrcode.js";
// import { BrowserQRCodeReader } from '@zxing/library';
import {
	ref,
	watch
} from "vue";
import {
	onShow
} from "@dcloudio/uni-app"
import apiFn from '@/hooks/myCirculation.js'
import {
	ScanCode
} from '@/utils/check.js'
import i18n from '@/locale/index'
const {
	addUserAroundFlow,
	getMyFlowMoney
} = apiFn()
const MyFlowMoney = ref({})
const userInfo = ref({})
const typePass = ref(false)
const formData = ref({
	userId: '', //用户UserId
	urlCFP: '', //被转账人CFP地址
	type: 1,
	amountFlow: '',
	flowRate: '',
	note: '',
	payPassword: ''
})
let state = ref(false)
const bool = ref(false)
const inputDialog = ref()

// async function getuserinfo() {
// 	const res = await uni.getStorage({
// 		key: 'setUserInfo'
// 	})
// 	userInfo.value = res.data
// 	formData.value.userId = userInfo.value.userId
// }
let getStorage = async() =>{
    //这是一个异步接口
    await uni.getStorage({
      key:'googleVerificationSwitch',//本地缓存中的指定的 key
      success(res) {//接口调用的回调函数，res = {data: key对应的内容}
        typePass.value = res.data
      }
    })
  }
const getuserinfo = async () => {
	const res = await uni.getStorage({
		key: 'setUserInfo'
	})
	userInfo.value = res.data
	formData.value.userId = userInfo.value.userId
}
getuserinfo()

// //手续费比例有可能调接口，现在还没确定
// watch(() => formData.value.amountFlow, (n) => {
// 	let a = 1
// 	if (formData.value.flowRate) {
// 		formData.value.flowRate = 0
// 	}
// 	formData.value.flowRate = (n+formData.value.flowRate)*0.05
// })
onShow(async () => {
	let list = {
		userId: uni.getStorageSync('setUserInfo').userId
	}
	let moneyAmoutData = await getMyFlowMoney('user/personalCenter', list)
	MyFlowMoney.value = moneyAmoutData
	userInfos()
	getuserinfo()
})
//全部按钮
function all() {
	formData.value.flowRate = 0
	formData.value.amountFlow = MyFlowMoney.value.remainsTotalAmount
}

function cli(e) {
	if (!e.detail.value) {
		uni.showToast({ title: `${i18n.global.t('數量不能為空')}!`, icon: 'none', })
		return formData.value.amountFlow = 1
	}

	if (e.detail.value < 1) {
		uni.showToast({ title: `${i18n.global.t('數量不能小於一')}!`, icon: 'none', })
		return formData.value.amountFlow = 1
	}
	const a = +e.detail.value
	formData.value.amountFlow = a.toFixed(2)
}
	async function userInfos(){
		let list = {
			userId: uni.getStorageSync('setUserInfo').userId
		}
		let data = await getMyFlowMoney('user/personalInfo', list)
		typePass.value = data.googleVerificationSwitch
	}
//确认按钮
async function notarize() {
	
	if (!formData.value.urlCFP || !formData.value.amountFlow) {
		return uni.showToast({
			title: `${i18n.global.t('請完善信息')}!`,
			icon: 'none',
		})
	}
	if (formData.value.amountFlow < 1) return uni.showToast({
		title: `${i18n.global.t('數量不能小於1')}!`,
		icon: 'none',
	})
	if (!uni.getStorageSync('setUserInfo').payPasswordStatus) {
		uni.navigateTo({
			url: '/pages/transactionPassword/transactionPassword'
		})
		uni.showToast({
			title: `${i18n.global.t('請先設置交易密碼')}!`,
			icon: 'none',
		})
		return
	}
	inputDialog.value.open()
}
//#ifdef APP-PLUS
//扫码
async function scan() {
	const res = await ScanCode()
	formData.value.urlCFP = res
}
//#endif
//   //#ifdef H5
//   function scanCodeH5() {
// uni.chooseImage({
//       sizeType: ["original"],
//       count: 1,
//       success: function (res) {
//         const tempFilePaths = res.tempFilePaths[0]; // 获取到二维码图片的链接
//         qrcode.decode(tempFilePaths); // 解析二维码图片
//         qrcode.callback = async function (res1) {
//           // 解析失败返回 error decoding QR Code
//           if (res1 == "error decoding QR Code") {
//             uni.showToast({
//               title: "二维码解析失败",
//               duration: 2000,
//               icon: "none",
//             });
//           } else {
// 		alert('1111',res1)
//             //扫码成功 res1就是扫描二维码的结果在这里写扫码成功的逻辑
//           }
//         };
//       },
//     });
//   }
//   //#endif

async function dialogInputConfirm(val) {
	formData.value.payPassword = val
	if (!val) {
		uni.showToast({
			title: `${i18n.global.t('請填寫交易密碼')}!`,
			icon: 'none',
		})
		return
	}
	await addUserAroundFlow('userAroundFlow/addUserAroundFlow', formData.value)
	uni.showToast({
		title: `${i18n.global.t('流轉完成')}`,
		icon: 'none',
	})
	uni.switchTab({
		url: '/pages/my/my',
		success() {
			let page = getCurrentPages().pop(); //跳转页面成功之后
			if (!page) return;
			page.onShow(); //如果页面存在，则重新刷新页面
		}
	})
	inputDialog.value.close()
}

function dialogClose() {
}
</script>

<style scoped>
.sText {
	font-size: 22rpx;
	text-align: center;
	margin: 0 auto;
	color: #848686;
	line-height: 50rpx;
}

.btn {
	width: 640rpx;
	height: 100rpx;
	background: linear-gradient(90deg, #039BDA, #12FFFA);
	border-radius: 50rpx;
	margin: 0 auto;
	text-align: center;
	line-height: 100rpx;
	font-size: 30rpx;
	color: #FFFFFF;
	margin-top: 25rpx;
}

.inpIconFlex {
	display: flex;
	align-items: center;
}

.num {
	font-size: 28rpx;
	color: #12FFFA;
	position: absolute;
	right: 80rpx;
}

.inpIcon {
	display: block;
	width: 28rpx;
	height: 28rpx;
	position: absolute;
	right: 70rpx;
}

.inp {
	border: 2rpx solid #636897;
	border-radius: 10rpx;
	padding: 32rpx;
	font-size: 28rpx;
	color: #FFFFFF;
	display: block;
	width: 100%;
	/* border: 0; */
}

/* 	.inp:focus  {
		border: 2rpx solid #fff;
		border-radius: 10rpx;
		padding: 32rpx;
		font-size: 28rpx;
		color: #FFFFFF;
		display: block;
		width: 100%;
	} */

.inputName {
	font-size: 24rpx;
	color: #808492;
	line-height: 80rpx;
}

.contentList {
	padding: 25rpx;
}

.moneyNameKk {
	width: 180rpx;
	height: 60rpx;
	background: linear-gradient(90deg, #039BDA, #12FFFA);
	border-radius: 10rpx;
	text-align: center;
	line-height: 60rpx;
}

.moneyTypeName {
	font-size: 22rpx;
	color: #848686;
	line-height: 50rpx;
}

.moneyName {
	font-size: 30rpx;
	margin-left: 15rpx;
	color: #FFFFFF;
}

.iconText {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}

.imgText {
	width: 100%;
	padding: 25rpx;
}

.icon {
	width: 60rpx;
	height: 60rpx;
	display: block;
}

.contentMain {
	padding: 30rpx;
}

.img {
	width: 100%;
	height: 270rpx;
}
</style>